<template>
  <el-dialog
    title="新增角色"
    :visible.sync="isShow"
    width="50%"
    :before-close="handleClose"
  >
    <el-form label-width="100px">
      <el-row :gutter="20">
        <el-col :lg="24" :xl="24">
          <el-form-item label="角色名称">
            <el-input
              type="text"
              v-model="queryParam.roleName"
              placeholder="请输入角色名称"
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-col>
        <!--        <el-col :lg="24" :xl="24">-->
        <!--          <el-form-item label="角色描述">-->
        <!--            <el-input-->
        <!--              type="text"-->
        <!--              v-model="queryParam.comment"-->
        <!--              placeholder="请输入角色描述"-->
        <!--            ></el-input>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="sureBtn">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import serve from "@/api/jurisdiction";

export default {
  data() {
    return {
      queryParam: {
        roleName: "",
        // comment: "",
        id: ""
      },
      title: ""
    };
  },
  props: {
    isShow: {
      type: Boolean,
      default() {
        return false;
      }
    },
    checkName: {
      type: String,
      default() {
        return "";
      }
    },
    checkContent: {
      type: String,
      default() {
        return "";
      }
    },
    type: {
      type: String,
      default() {
        return "";
      }
    },
    id: {
      type: String,
      default() {
        return "";
      }
    }
  },
  watch: {
    /* eslint-disable */
    isShow(val) {
      this.queryParam.roleName = "";
      // this.queryParam.comment = "";
      if (this.type + "" === "2") {
        this.queryParam.roleName = this.checkName;
        // this.queryParam.comment = this.checkContent;
        this.queryParam.id = this.id;
      }
    }
  },
  created() {},
  methods: {
    handleClose() {
      this.$emit("closeModel", false);
    },
    sureBtn() {
      if (this.queryParam.roleName === "") {
        this.$message.error("请输入名称");
        return;
      }
      let url = "";
      if (this.type + "" === "1") {
        url = serve.roleApiAddServe;
      } else if (this.type + "" === "2") {
        url = serve.roleApiUpdate;
      }
      url(this.queryParam).then(res => {
        if (res.code === 200) {
          this.$message.success('新增成功');
          this.handleClose();
        } else {
          this.$message.error(res.message, 2);
        }
      });
    }
  }
};
</script>

<style scoped></style>
